<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="25%"
  >
    <span>{{ content }}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="conform">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      content: ''
    }
  },
  mounted() {
    this.$bus.on('conformDialog', (obj) => {
      if (obj instanceof Object) {
        if (!obj.content) {
          console.error('使用自定义弹出框时，请设置内容: content')
          return
        }
        this.dialogVisible = true
        this.title = obj.title || '未设置标题'
        this.content = obj.content || '未设置标题'
        this.successFn = obj.successFn
      } else {
        console.error('使用自定义弹出框时，传递参数只能是对象')
      }
    })
  },
  destroyed: function() {
    this.$bus.off('conformDialog')
  },
  methods: {
    conform: function() {
      typeof this.successFn === 'function' && this.successFn()
      this.dialogVisible = false
    }
  }
}
</script>

